<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
    getAllVideoData,
    addVideoData,
    updateVideoData,
    deleteVideoData,
} from "./api";

const loading = ref(false);
const videoList = ref([]);
const dialogVisible = ref(false);
const editMode = ref(false);
const form = reactive({
    _id: "",
    video: "",
    name: "",
    type: "video",
});

function resetForm() {
    form._id = "";
    form.video = "";
    form.name = "";
    form.type = "video";
}

async function fetchVideoList() {
    loading.value = true;
    try {
        videoList.value = await getAllVideoData();
    } catch (e) {
        ElMessage.error("获取视频数据失败");
    } finally {
        loading.value = false;
    }
}

function handleAdd() {
    resetForm();
    editMode.value = false;
    dialogVisible.value = true;
}

function handleEdit(item) {
    form._id = item._id;
    form.video = item.video;
    form.name = item.name;
    form.type = item.type;
    editMode.value = true;
    dialogVisible.value = true;
}

async function handleSave() {
    loading.value = true;
    const operatorId = sessionStorage.getItem("user_id");
    try {
        if (editMode.value) {
            await updateVideoData(form._id, {
                operatorId,
                name: form.name,
                type: form.type,
            });
            ElMessage.success("更新成功");
        } else {
            await addVideoData({
                operatorId,
                video: form.video,
                name: form.name,
                type: form.type,
            });
            ElMessage.success("添加成功");
        }
        dialogVisible.value = false;
        fetchVideoList();
    } catch (e) {
        ElMessage.error(e?.response?.data?.error || "操作失败");
    } finally {
        loading.value = false;
    }
}

async function handleDelete(id) {
    const operatorId = sessionStorage.getItem("user_id");
    ElMessageBox.confirm("确定要删除该视频数据吗？", "提示", {
        type: "warning",
    })
        .then(async () => {
            loading.value = true;
            try {
                await deleteVideoData(id, operatorId);
                ElMessage.success("删除成功");
                fetchVideoList();
            } catch (e) {
                ElMessage.error(e?.response?.data?.error || "删除失败");
            } finally {
                loading.value = false;
            }
        })
        .catch(() => {});
}

onMounted(fetchVideoList);
</script>

<template>
    <div style="max-width: 900px; margin: 40px auto">
        <el-card>
            <div style="margin-bottom: 16px; text-align: right">
                <el-button type="primary" @click="handleAdd"
                    >添加视频数据</el-button
                >
            </div>
            <el-table :data="videoList" style="width: 100%" v-loading="loading">
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="type" label="类型">
                    <template #default="{ row }">
                        <span v-if="row.type === 'video'">视频</span>
                        <span v-else-if="row.type === 'iframe'"
                            >抖音iframe</span
                        >
                        <span v-else>{{ row.type }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="video"
                    label="视频/抖音iframe链接"
                    width="280px"
                >
                    <template #default="{ row }">
                        <a :href="row.video" target="_blank">{{ row.video }}</a>
                        <video
                            v-if="row.type === 'video'"
                            :src="row.video"
                            style="width: 16rem"
                            controls
                        />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template #default="{ row }">
                        <el-button size="small" @click="handleEdit(row)"
                            >编辑</el-button
                        >
                        <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(row._id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
            v-model="dialogVisible"
            :title="editMode ? '编辑视频数据' : '添加视频数据'"
            width="900px"
        >
            <el-form :model="form" label-width="180px">
                <el-form-item label="名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.type">
                        <el-option label="视频" value="video" />
                        <el-option label="抖音iframe" value="iframe" />
                    </el-select>
                </el-form-item>
                <el-form-item label="视频/iframe链接">
                    <el-input v-model="form.video" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" :loading="loading" @click="handleSave"
                    >保存</el-button
                >
            </template>
        </el-dialog>
    </div>
</template>

<style lang='scss' scoped>
</style>